<template>
<div :class="[$style.container]">
  <div :class="[$style.header]">
    回收站
  </div>
  <div :class="[$style.body]">
    <ul :class="[$style.list]">
      <li :class="[$style.item]" v-for="(row, i) in rows" :key="i" @dblclick="onGoto(row)">
        <span :class="[$style.icon]"><svg-icon icon="bin"></svg-icon></span>
        <el-link :underline="false" @click="onGoto(row)">{{row.label}}</el-link>
      </li>
    </ul>
  </div>
</div>
</template>

<script lang="ts">

import { getUserAdminEnterprises } from '@/api/enterprise'
import { Vue, Component, Provide, Watch, Ref, Prop } from 'vue-property-decorator'

@Component
export default class Trash extends Vue {
  loading = false

  rows: any[] = []

  onGoto (row: any) {
    if (row.type === 'user') {
      this.$router.push('/trash/user')
    } else {
      this.$router.push(`/trash/enterprise/${row.id}`)
    }
  }

  loadAdminEnterprises () {
    this.loading = false
    getUserAdminEnterprises().then(data => {
      this.rows = [
        { type: 'user', id: -1, label: '个人回收站' },
        ...data.map(v => ({ type: 'enterprise', id: v.id, label: v.name }))
      ]
    }).finally(() => {
      this.loading = true
    })
  }

  created () {
    this.loadAdminEnterprises()
  }
}
</script>

<style lang="scss" module>
@import "~@/styles/vars.scss";

$header-height: 40px;

.container {
  height: 100%;
  background-color: $bg-color;
}

.header {
  height: $header-height;
  background-color: $bg-color;
  border-bottom: 1px solid $border-split-color;
  box-sizing: border-box;
  margin: 0 12px;
  display: flex;
  align-items: center;
  font-size: 16px;
}

.body {
  height: calc(100% - #{$header-height});
  overflow: auto;
}

.list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.item {
  position: relative;
  display: flex;
  align-items: center;
  margin: 0 12px;
  border-bottom: 1px solid $border-split-color;
  height: 48px;
  padding: 8px 12px;

  &:hover{
    background-color: $bg-body-color;
    cursor: pointer;
  }
}

.icon {
  font-size: 32px;
  margin-right: 12px;
}
</style>
